<template>
  <div  v-loading="loading"  element-loading-text="加载中，请稍等...">
    <div :style="{ width: '100%', height: '5vh',lineHeight: '5vh',display: 'inline-block;' ,background: 'white'}">
<!--      <el-input v-model="searchDocNo"  @keyup.enter.native="getData" style="width:200px;margin-left: 5px" placeholder="请输入工单号"></el-input>-->
      <el-select v-model="searchDocNo" :disabled="disabled" placeholder="请选择工单号"  filterable clearable style="width:200px;margin-left: 5px">
        <el-option
          @click.native="getData"
          v-for="item in docNoList"
          :key="item.id"
          :label="item.docNo"
          :value="item.docNo">
        </el-option>
      </el-select>
      <el-input v-model="searchDeviceSn"  @keyup.enter.native="getData" style="width:200px;margin-left: 5px" placeholder="请输入设备编码"></el-input>
      <el-button type="primary" @click="getData"  style="margin-left: 5px;height: 30px">查询</el-button>
    </div>
    <div :style="{ width: '100%', height: '80vh',display: 'flex' ,background: 'white',marginTop:'2px'}">
      <div ref="chartIl" :style="{ width: '49%', height: '100%',marginRight:'1%'}"></div>
      <div :style="{ width: '1px', height: '100%', background: '#ccc', margin: '0 1%' }"></div>
      <div ref="chartRl" :style="{ width: '49%', height: '100%',marginLeft:'1%'}"></div>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts/lib/chart/line';
import { ilRlSR8Histogram} from '@/api/workorder/opltshhs';
import {getDocNoListByType} from "@/api/workorder/workordercps";

export default {
  name: 'SR8-LIRL-Histogram',
  props:{
    viewDocNo:{//查看工单号
      type:String
    },
  },
  data() {
    return {
      chartIl: null,
      chartRl: null,
      chartIlData: [],//插损数据集
      chartRlData: [],//回损数据集
      totalData: [],//初始数据集
      tableData: [],//列表数据集
      docNo:null,//工单号用于查询
      loading: false,//加载遮盖开关
      searchDocNo:null,//存储输入框的工单号
      searchDeviceSn:null,//存储输入框的设备编码
      deviceSn:null,//设备编码
      docNoList:[],
      disabled:false


    };
  },
  created() {
    this.getDocNoGEN2ListData();
  },
  mounted() {
    window.addEventListener('resize', this.onResize);
  },
  beforeDestroy() {
    if (this.chartIl) {
      this.chartIl.dispose();
    }
    if (this.chartRl) {
      this.chartRl.dispose();
    }
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    refreshChange(){
      this.searchDocNo = this.viewDocNo;
      this.disabled = true;
      this.getData();
    },
    getDocNoGEN2ListData(){
      getDocNoListByType("GEN2").then(response => {
        this.docNoList = response.data.data;
      })
    },
    getData() {
      console.log(this.docNo);
      if(this.validatenull(this.searchDocNo)){
        this.$message.error('请输入工单!');
        return;
      }
      this.docNo = this.searchDocNo;
      this.deviceSn = this.searchDeviceSn;
      if(this.validatenull(this.deviceSn)){
        this.deviceSn = 'null';
      }
      this.loading = true;
      // 调用接口获取数据
      ilRlSR8Histogram(this.docNo,this.deviceSn).then(response => {
        this.totalData =  response.data;
        this.chartIlData = [...this.totalData.dataIl];
        this.chartRlData = [...this.totalData.dataRl];
        this.initIlChart();
        this.initRlChart();
        this.loading = false;

      });
    },
    initIlChart() {
      this.chartIl = echarts.init(this.$refs.chartIl, "dark");
      const option = {
        title: {
          text: 'SR8-IL'+'-【'+this.docNo+'】', // 主标题文本
          // subtext: '副标题', // 副标题文本
          left: 'center', // 标题水平位置
          textStyle: {
            color: '#000',
            fontSize: 14 // 设置标题字体大小为20
          },
          top:'2%'
        },
        grid: {
          left: '10%',    // 距离左边的距离
          // right: '10%',   // 距离右边的距离
          // top: '10%',     // 距离顶部的距离
          bottom: '20%',  // 距离底部的距离
          // containLabel: true // 包含坐标轴的标签
        },
        backgroundColor: 'rgba(0, 0, 0, 0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }

        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
          },
          iconStyle: {
            borderColor: '#444', // 边框颜色
            borderWidth: 1, // 边框宽度
          }
        },
        legend: {
          data: ['IL-Histogram'],
          top: '5%',
          textStyle: {
            color: '#000' // 设置图例文字颜色为红色
          },
          itemWidth: 13,  // 设置图例标记的宽度
          itemHeight: 8, // 设置图例标记的高度

        },
        xAxis: {
          name: '区间',
          type: 'category',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          data: this.histogramILData().map(item => item.name),
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: 0, // 旋转角度
            fontSize: 8 ,// 修改为需要的字体大小
            color: '#000',
            formatter: function (value, index) {
              return value.split('(').pop().split(')')[0];
            }
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: {
          name: '数量',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          type: 'value',
          splitNumber: 10, // 设置分割数
          boundaryGap: [0, '5%'], // 上边界留出 5%
          splitLine: {
            show: false // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          axisLabel: {
            fontSize: 8, // 修改为需要的字体大小
            color: '#000'
          },
        },
        series: [
          {
            name: 'IL-Histogram',
            type: 'bar',
            yAxisIndex: 0,
            data: this.histogramILData(),
            barWidth: '80%',
            barGap: '5%',
          },

        ]
      };

      this.chartIl.setOption(option);
    },
    histogramILData() {
      // 定义区间宽度
      const intervalWidth = 0.35 / 8;

      // 生成8个区间对象，每个对象包含start和end属性
      const intervals = Array.from({ length: 8 }, (_, i) => {
        const start = Math.round((i * intervalWidth) * 1000) / 1000;
        const end = Math.round(((i + 1) * intervalWidth) * 1000) / 1000;
        return { start, end };
      });

      // 使用map方法遍历intervals数组，生成直方图数据
      const histogramData = intervals.map((interval, i) => {
        const lowerBound = interval.start.toFixed(3);
        const upperBound = interval.end.toFixed(3);
        const intervalName = `[${lowerBound}, ${upperBound}]`;
        const count = this.chartIlData[i].count;
        return {
          name: intervalName,
          value: count
        };
      });

      return histogramData;
    },
    initRlChart() {
      this.chartRl = echarts.init(this.$refs.chartRl, "dark");
      const option = {
        title: {
          text: 'SR8-IRL'+'-【'+this.docNo+'】', // 主标题文本
          // subtext: '副标题', // 副标题文本
          left: 'center', // 标题水平位置
          textStyle: {
            color: '#000',
            fontSize: 14 // 设置标题字体大小为20
          },
          top:'2%'
        },
        grid: {
          left: '10%',    // 距离左边的距离
          // right: '10%',   // 距离右边的距离
          // top: '10%',     // 距离顶部的距离
          bottom: '20%',  // 距离底部的距离
          // containLabel: true // 包含坐标轴的标签
        },
        backgroundColor: 'rgba(0, 0, 0, 0)',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }

        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
          },
          iconStyle: {
            borderColor: '#444', // 边框颜色
            borderWidth: 1, // 边框宽度
          }
        },
        legend: {
          data: ['RL-Histogram'],
          top: '5%',
          textStyle: {
            color: '#000' // 设置图例文字颜色为红色
          },
          itemWidth: 13,  // 设置图例标记的宽度
          itemHeight: 8, // 设置图例标记的高度
        },
        xAxis: {
          name: '区间',
          type: 'category',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          data: this.histogramRLData().map(item => item.name),
          axisLabel: {
            interval: 0, // 显示所有标签
            rotate: 0, // 旋转角度
            fontSize: 8 ,// 修改为需要的字体大小
            color: '#000',
            formatter: function (value, index) {
              return value.split('(').pop().split(')')[0];
            }
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        yAxis: {
          name: '数量',
          nameTextStyle: { // 名称样式
            color: '#000' // 字体颜色
          },
          type: 'value',
          splitNumber: 10, // 设置分割数
          boundaryGap: [0, '5%'], // 上边界留出 5%
          splitLine: {
            show: false // 不显示网格线
          },
          axisLine: {
            lineStyle: {
              color: '#b1b1b1' // 设置纵坐标轴颜色为绿色
            }
          },
          axisLabel: {
            fontSize: 8, // 修改为需要的字体大小
            color: '#000'
          },
        },
        series: [
          {
            name: 'RL-Histogram',
            type: 'bar',
            yAxisIndex: 0,
            data: this.histogramRLData(),
            barWidth: '80%',
            barGap: '5%',
          },

        ]
      };

      this.chartRl.setOption(option);
    },
    histogramRLData() {
      // 定义区间宽度
      const intervalWidth = (80 - 37) / 10;

      // 生成10个区间对象，每个对象包含start和end属性
      const intervals = Array.from({ length: 10 }, (_, i) => {
        const start = Math.round((37 + i * intervalWidth) * 1000) / 1000;
        const end = Math.round((37 + (i + 1) * intervalWidth) * 1000) / 1000;
        return { start, end };
      });

      // 使用map方法遍历intervals数组，生成直方图数据
      const histogramData = intervals.map((interval, i) => {
        const lowerBound = interval.start.toFixed(3);
        const upperBound = interval.end.toFixed(3);
        const intervalName = `[${lowerBound}, ${upperBound}]`;
        const count = this.chartRlData[i].count;
        return {
          name: intervalName,
          value: count
        };
      });

      return histogramData;
    },
    onResize() {
      if (this.chartIl) {
        this.chartIl.resize();
      }
      if (this.chartRl) {
        this.chartRl.resize();
      }
    }
  }
};
</script>
